<script setup>
import Foot from "@/components/app-bar/foot/index.vue";
import { ref } from "vue";
const menu_val = ref();
const show_menu = ref(false);
</script>

<template>
  <var-app-bar color="white" text-color="black" round safe-area-top="true" title-position="center">
    管理模板
    <template #right>
      <var-menu
        close-on-click-reference
        v-model="menu_val"
        v-model:show="show_menu"
        placement="bottom-start"
        :offset-y="10"
      >
        <var-button type="primary">
          <var-icon
            animation-class="menu-change"
            :transition="300"
            :name="`${show_menu ? 'menu-open' : 'menu'}`"
          />
        </var-button>
        <template #menu>
          <var-cell>菜单项</var-cell>
          <var-cell>菜单项</var-cell>
          <var-cell>菜单项</var-cell>
        </template>
      </var-menu>
    </template>
  </var-app-bar>
  <transition name="slide">
    <router-view></router-view>
  </transition>
  <Foot></Foot>
</template>

<style lang="scss">
@import "./style.scss";
$dis: 48px;
body {
  padding: 0;
  margin: 0;
  .menu-change {
    transform: rotateY(90deg);
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.4s ease-out;
    
  }

  .slide-enter-from {
    transform: translateY(-$dis);
    opacity: 0;
  }
  .slide-enter-to {
    transform: translateY(0);
    opacity: 1;
  }
  .slide-leave-from {
    transform: translateY(0);opacity: 0;
  }
  .slide-leave-to {
    transform: translateY(-$dis);opacity: 1;
  }
}
</style>
